<#import "/common/base.ftl" as base/>
<#import "/common/button.ftl" as but/>
<#import "/common/tableOpt.ftl" as tabt/>
<#import "/common/widget.ftl" as widget/>
<#assign jses=[
"/js/service/protocolc.js",
"/js/app/protocolc_config.js"] in base/>
<#assign csses=["/webjars/1.0.0/css/colors.css"] in base/>
<@base.page "">
    <div class="grid-content bg-purple-light" id="main_content">
        <el-col :span="24" class="content-wrapper">
            <section>
                <el-col :span="24" class="toolbar">
                    <el-row>
                        <el-button plain size="small" icon="el-icon-back" @click="goBack">返回</el-button>
                        <label>${(stype=='snmp')?then('SNMP配置','协议配置')}</label>
                    </el-row>
                    <el-row v-if="stype != 'RePing'" >
                        <el-button type="success" plain size="small" icon="el-icon-plus" @click="maddRow"
                                   :disabled="!addAble">添加监控项
                        </el-button>
                        <el-button type="danger" plain size="small" icon="el-icon-delete"
                                   @click="mdeleteRow(selectedRows)"
                                   :disabled="selectedRows.length<=0">删除监控项
                        </el-button>
                        <el-button type="primary" plain size="small" icon="el-icon-download" v-if="stype!='snmp'"
                                   :disabled="!addAble"
                                   @click="oneClick">
                            智能导入
                        </el-button>
                    </el-row>
                    <el-form inline="true" :model="searchVm">
                        <el-form-item label="" v-if="stype != 'RePing' ">
                            <el-input style="width: 150px;" v-model="searchVm.mid" clearable
                                      placeholder=${(stype=='snmp')?then('oid','id')}
                                      clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input style="width: 150px;" v-model="searchVm.name" clearable placeholder="监控名称"
                                      maxlength="20"
                                      show-word-limit
                                      clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-select style="width: 150px;" v-model="searchVm.dataType" clearable placeholder="选择类型"
                                       clearable="true">
                                <el-option v-for="item in dataTypes" :value="item.id" :key="item.id"
                                           :label="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                        <@but.search "search()" ":loading='tableVm.loading' :disabled='!addAble'"/>
                    </el-form>
                    <!--表格-->
                    <el-table ref="multipleTable" stripe :data="tableVm.data" border style="width: 100%"
                              :max-height="contentHeight"
                              v-loading="tableVm.loading" @selection-change="handleSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column v-if="stype != 'RePing'" prop="mid" label=${(stype=='snmp')?then('oid','id')} min-width="100"
                                         show-overflow-tooltip>
                            <template scope="scope">
                                <el-input width="100%" v-model="scope.row.mid" clearable
                                          maxlength="50"
                                          show-word-limit
                                          v-if="editIndex==scope.$index"></el-input>
                                <label v-if="editIndex!=scope.$index">{{scope.row.mid}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column prop="channelCode" label="通道号" min-width="100"
                                         show-overflow-tooltip>
                            <template scope="scope">
                                <el-input width="100%" v-model="scope.row.channelCode" clearable
                                          v-if="editIndex==scope.$index" maxlength="3"></el-input>
                                <label v-if="editIndex!=scope.$index">{{scope.row.channelCode}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="监控名称" min-width="100"
                                         show-overflow-tooltip>
                            <template scope="scope">
                                <el-input width="100%" v-model="scope.row.name" clearable
                                          maxlength="20"
                                          show-word-limit
                                          v-if="editIndex==scope.$index"></el-input>
                                <label v-if="editIndex!=scope.$index">{{scope.row.name}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column prop="unit" label="单位" min-width="100"
                                         show-overflow-tooltip>
                            <template scope="scope">
                                <el-input width="100%" v-model="scope.row.unit" clearable
                                          maxlength="10"
                                          show-word-limit
                                          v-if="editIndex==scope.$index"></el-input>
                                <label v-if="editIndex!=scope.$index">{{scope.row.unit}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column prop="dataType" label="类型" min-width="100"
                                         show-overflow-tooltip>
                            <template scope="scope">
                                <el-select style="width: 150px;" v-model="scope.row.dataType" clearable
                                           placeholder="选择类型"
                                           v-if="editIndex==scope.$index"
                                           clearable="true">
                                    <el-option v-for="item in dataTypes" :value="item.id" :key="item.id"
                                               :label="item.name"></el-option>
                                </el-select>
                                <label v-if="editIndex!=scope.$index">{{(scope.row.dataType == null ||
                                    scope.row.dataType === '')?
                                    '未设置':(scope.row.dataType==1?dataTypes[1].name:dataTypes[0].name)}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" min-width="300" v-if="stype!='RePing' ">
                            <template scope="scope">
                                <el-button v-if="editIndex!=scope.$index" type="warning" icon="el-icon-edit"
                                           size="small"
                                           :disabled="isEdit"
                                           @click="medit(scope.$index,scope.row)">编辑
                                </el-button>
                                <el-button v-if="editIndex==scope.$index" type="success" icon="el-icon-success"
                                           size="small"
                                           @click="msave(scope.$index,scope.row)">保存
                                </el-button>
                                <el-button v-if="editIndex==scope.$index" type="danger" icon="el-icon-refresh-right"
                                           size="small"
                                           @click="cancel(scope.row)">取消
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!--导入页面-->
                    <el-dialog id="input_dialog" :title="editVm.oprate" :visible.sync="editVm.bvisible" width="900px"
                               ref="editVm.addTitle"
                    >
                        <el-form :model="editVm.data" label-width="150px" :rules="editVm.editFormRules.formRules"
                                 @submit.native.prevent
                                 ref="editForm">
                            <el-row>
                                <el-form-item label="通信识别码" prop="deviceCode">
                                    <el-input v-model="editVm.data.deviceCode" maxlength="20" clearable
                                              placeholder="输入通信识别码"
                                              @keyup.enter.native="dialogClose"
                                    ></el-input>
                                    <div style="color: #F56C6C">若网关存在ID，请在输入时带上ID值，格式：网关ID_设备号。示例：23_127.0.0.1:10001
                                    </div>
                                </el-form-item>
                            </el-row>
                        </el-form>
                        <div solt="footer" class="dialog-footer">
                            <@but.back "editVm.bvisible = false" />
                            <@but.save "doOneClick(editVm)" 'v-if="editVm.isEdit" :loading="editVm.loading"'/>
                        </div>
                    </el-dialog>

                    <el-dialog :title="editVm.oprate" :visible.sync="editVm.avisible" width="30%">
                        <div style="height: 20px"></div>
                        <div style="color: #F56C6C">此操作会先清空当前列表及数据，是否继续？</div>
                        <div style="height: 50px"></div>
                        <div solt="footer" class="dialog-footer">
                            <el-button @click="editVm.avisible = false">取消</el-button>
                            <el-button type="primary" @click="confirmOneClick">确定</el-button>
                        </div>
                    </el-dialog>
                </el-col>
            </section>
        </el-col>
    </div>
</@base.page>